<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线截图生成器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            padding: 30px;
        }

        .editor-section {
            display: flex;
            flex-direction: column;
        }

        .section-title {
            font-size: 1.3em;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .html-editor {
            width: 100%;
            height: 400px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            line-height: 1.5;
            resize: vertical;
            transition: border-color 0.3s ease;
        }

        .html-editor:focus {
            outline: none;
            border-color: #4CAF50;
        }

        .options-section {
            display: flex;
            flex-direction: column;
        }

        .options-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }

        .option-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .option-group label {
            font-weight: 500;
            color: #555;
        }

        .option-group input,
        .option-group select {
            padding: 8px 12px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .option-group input:focus,
        .option-group select:focus {
            outline: none;
            border-color: #4CAF50;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 10px 0;
        }

        .checkbox-group input[type="checkbox"] {
            width: 18px;
            height: 18px;
        }

        .action-buttons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: #4CAF50;
            color: white;
        }

        .btn-primary:hover {
            background: #45a049;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #f5f5f5;
            color: #333;
            border: 2px solid #e0e0e0;
        }

        .btn-secondary:hover {
            background: #e9e9e9;
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }

        .status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            font-weight: 500;
        }

        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .status.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #4CAF50;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .service-status {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            padding: 10px 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #dc3545;
        }

        .status-indicator.online {
            background: #28a745;
        }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
                gap: 20px;
                padding: 20px;
            }
            
            .options-grid {
                grid-template-columns: 1fr;
            }
            
            .action-buttons {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 在线截图生成器</h1>
            <p>输入HTML代码，一键生成高质量截图</p>
        </div>

        <div class="main-content">
            <div class="editor-section">
                <div class="section-title">
                    📝 HTML代码编辑器
                </div>
                <textarea id="htmlEditor" class="html-editor" placeholder="请输入HTML代码..."><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
        }
        .card {
            background: white;
            color: #333;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            max-width: 500px;
            margin: 0 auto;
        }
        h1 { color: #4CAF50; margin-bottom: 20px; }
        p { line-height: 1.6; margin-bottom: 15px; }
        .highlight { background: #ffeb3b; padding: 2px 6px; border-radius: 3px; }
    </style>
</head>
<body>
    <div class="card">
        <h1>🎉 截图测试页面</h1>
        <p>这是一个<span class="highlight">示例页面</span>，用于测试截图功能。</p>
        <p>生成时间: <span id="time"></span></p>
        <script>
            document.getElementById('time').textContent = new Date().toLocaleString();
        </script>
    </div>
</body>
</html></textarea>
            </div>

            <div class="options-section">
                <div class="section-title">
                    ⚙️ 截图配置
                </div>
                
                <div class="service-status">
                    <div id="statusIndicator" class="status-indicator"></div>
                    <span id="statusText">检查服务状态中...</span>
                </div>

                <div class="options-grid">
                    <div class="option-group">
                        <label for="width">宽度 (px)</label>
                        <input type="number" id="width" value="1200" min="100" max="3000">
                    </div>
                    <div class="option-group">
                        <label for="height">高度 (px)</label>
                        <input type="number" id="height" value="800" min="100" max="3000">
                    </div>
                    <div class="option-group">
                        <label for="scale">缩放因子</label>
                        <input type="number" id="scale" value="2" min="1" max="3" step="0.1">
                    </div>
                    <div class="option-group">
                        <label for="format">图片格式</label>
                        <select id="format">
                            <option value="png">PNG</option>
                            <option value="jpeg">JPEG</option>
                            <option value="webp">WebP</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label for="quality">JPEG质量 (1-100)</label>
                        <input type="number" id="quality" value="90" min="1" max="100">
                    </div>
                </div>

                <div class="checkbox-group">
                    <input type="checkbox" id="fullPage" checked>
                    <label for="fullPage">截取整页</label>
                </div>

                <div class="checkbox-group">
                    <input type="checkbox" id="autoSize">
                    <label for="autoSize">自动调整大小</label>
                </div>

                <div class="action-buttons">
                    <button id="generateBtn" class="btn btn-primary">
                        📸 生成截图
                    </button>
                    <button id="checkServiceBtn" class="btn btn-secondary">
                        🔍 检查服务
                    </button>
                </div>

                <div id="status" class="status" style="display: none;"></div>
            </div>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:3000';
        
        // DOM元素
        const htmlEditor = document.getElementById('htmlEditor');
        const generateBtn = document.getElementById('generateBtn');
        const checkServiceBtn = document.getElementById('checkServiceBtn');
        const statusDiv = document.getElementById('status');
        const statusIndicator = document.getElementById('statusIndicator');
        const statusText = document.getElementById('statusText');

        // 配置元素
        const widthInput = document.getElementById('width');
        const heightInput = document.getElementById('height');
        const scaleInput = document.getElementById('scale');
        const formatSelect = document.getElementById('format');
        const qualityInput = document.getElementById('quality');
        const fullPageCheckbox = document.getElementById('fullPage');
        const autoSizeCheckbox = document.getElementById('autoSize');

        // 显示状态消息
        function showStatus(message, type = 'info') {
            statusDiv.textContent = message;
            statusDiv.className = `status ${type}`;
            statusDiv.style.display = 'block';
        }

        // 隐藏状态消息
        function hideStatus() {
            statusDiv.style.display = 'none';
        }

        // 更新服务状态
        function updateServiceStatus(isOnline, message) {
            statusIndicator.className = `status-indicator ${isOnline ? 'online' : ''}`;
            statusText.textContent = message;
            generateBtn.disabled = !isOnline;
        }

        // 检查服务状态
        async function checkServiceStatus() {
            try {
                const response = await fetch(`${API_BASE}/health`);
                if (response.ok) {
                    const data = await response.json();
                    updateServiceStatus(true, '服务在线 ✅');
                    return true;
                } else {
                    updateServiceStatus(false, '服务异常 ❌');
                    return false;
                }
            } catch (error) {
                updateServiceStatus(false, '服务离线 ❌');
                return false;
            }
        }

        // 生成截图
        async function generateScreenshot() {
            const htmlContent = htmlEditor.value.trim();
            
            if (!htmlContent) {
                showStatus('请输入HTML代码', 'error');
                return;
            }

            // 禁用按钮并显示加载状态
            generateBtn.disabled = true;
            generateBtn.innerHTML = '<div class="loading"></div> 生成中...';
            hideStatus();

            try {
                // 构建配置选项
                const options = {
                    width: parseInt(widthInput.value),
                    height: parseInt(heightInput.value),
                    deviceScaleFactor: parseFloat(scaleInput.value),
                    type: formatSelect.value,
                    quality: parseInt(qualityInput.value),
                    fullPage: fullPageCheckbox.checked,
                    autoSize: autoSizeCheckbox.checked
                };

                // 发送截图请求
                const response = await fetch(`${API_BASE}/screenshot`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        htmlContent: htmlContent,
                        options: options
                    })
                });

                if (response.ok) {
                    // 获取图片数据
                    const blob = await response.blob();
                    
                    // 创建下载链接
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `screenshot-${Date.now()}.${options.type}`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    window.URL.revokeObjectURL(url);
                    
                    showStatus('截图生成成功！文件已开始下载 🎉', 'success');
                } else {
                    const errorData = await response.json();
                    showStatus(`截图生成失败: ${errorData.error}`, 'error');
                }
            } catch (error) {
                showStatus(`网络错误: ${error.message}`, 'error');
            } finally {
                // 恢复按钮状态
                generateBtn.disabled = false;
                generateBtn.innerHTML = '📸 生成截图';
                
                // 重新检查服务状态
                setTimeout(checkServiceStatus, 1000);
            }
        }

        // 事件监听
        generateBtn.addEventListener('click', generateScreenshot);
        checkServiceBtn.addEventListener('click', checkServiceStatus);

        // 格式变化时显示/隐藏质量设置
        formatSelect.addEventListener('change', function() {
            qualityInput.parentElement.style.display = 
                this.value === 'jpeg' ? 'flex' : 'none';
        });

        // 页面加载时检查服务状态
        document.addEventListener('DOMContentLoaded', function() {
            checkServiceStatus();
            
            // 初始化质量设置显示状态
            qualityInput.parentElement.style.display = 
                formatSelect.value === 'jpeg' ? 'flex' : 'none';
        });

        // 定期检查服务状态
        setInterval(checkServiceStatus, 30000); // 每30秒检查一次
    </script>
</body>
</html>
